<template>
  <nav id="mainnav-container">
    <div id="mainnav">
      <!--Menu-->
      <!--================================-->
      <div id="mainnav-menu-wrap">
        <div class="nano">
          <div class="nano-content">
            <!--Profile Widget-->
            <!--================================-->
            <div id="mainnav-profile" class="mainnav-profile">
              <div class="profile-wrap">
                <div class="pad-btm">
                  <span class="label label-success pull-right">New</span>
                  <img class="img-circle img-sm img-border" src="static/img/profile-photos/1.png" alt="Profile Picture">
                </div>
                <a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
                  <span class="pull-right dropdown-toggle">
                    <i class="dropdown-caret"></i>
                  </span>
                  <p class="mnp-name">Aaron Chavez</p>
                  <span class="mnp-desc">aaron.cha@themeon.net</span>
                </a>
              </div>
              <div id="profile-nav" class="collapse list-group bg-trans">
                <a href="#" class="list-group-item">
                  <i class="demo-pli-male icon-lg icon-fw"></i> View Profile
                </a>
                <a href="#" class="list-group-item">
                  <i class="demo-pli-gear icon-lg icon-fw"></i> Settings
                </a>
                <a href="#" class="list-group-item">
                  <i class="demo-pli-information icon-lg icon-fw"></i> Help
                </a>
                <a href="#" class="list-group-item">
                  <i class="demo-pli-unlock icon-lg icon-fw"></i> Logout
                </a>
              </div>
            </div>
            <!--Shortcut buttons-->
            <!--================================-->
            <div id="mainnav-shortcut">
              <ul class="list-unstyled">
                <li class="col-xs-3" data-content="My Profile">
                  <a class="shortcut-grid" href="#">
                    <i class="demo-psi-male"></i>
                  </a>
                </li>
                <li class="col-xs-3" data-content="Messages">
                  <a class="shortcut-grid" href="#">
                    <i class="demo-psi-speech-bubble-3"></i>
                  </a>
                </li>
                <li class="col-xs-3" data-content="Activity">
                  <a class="shortcut-grid" href="#">
                    <i class="demo-psi-thunder"></i>
                  </a>
                </li>
                <li class="col-xs-3" data-content="Lock Screen">
                  <a class="shortcut-grid" href="#">
                    <i class="demo-psi-lock-2"></i>
                  </a>
                </li>
              </ul>
            </div>
            <!--================================-->
            <!--End shortcut buttons-->
            <ul id="mainnav-menu" class="list-group">
              <div v-for="group in navArr" :key="group._id">
                <li class="list-header">{{group.menu_name}}</li>
                <div v-for="item in group.children" class="no-margin" id="mainnav-menu" :key="item._id">
                  <router-link v-if="!item.children" tag="li" :key="item._id" :to="{name:item.router_name}">
                    <a href="">
                      <i :class="item.tubiao.bookname"></i>
                      <span class="menu-title">
                        {{item.menu_name}}
                      </span>
                    </a>
                  </router-link>
                  <li v-else>
                    <a href="#" aria-expanded="true">
                      <i :class="item.tubiao.bookname"></i>
                      <span class="menu-title">
                        {{item.menu_name}}
                      </span>
                      <i class="arrow"></i>
                    </a>
                    <ul class="collapse" aria-expanded="false">
                      <router-link v-for="list in item.children" tag="li" :key="list._id" :to="{name:list.router_name}">
                        <a href="">
                          {{list.menu_name}}
                        </a>
                      </router-link>
                    </ul>
                  </li>
                </div>
                <li class="list-divider"></li>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <!--================================-->
      <!--End menu-->
    </div>
  </nav>
</template>
<script>
import { mapState } from 'vuex'
export default {
  created() {},
  data() {
    return {

    }
  },
  mounted() {},
  methods: {
    changemenu(val) {
      this.$router.push({
        name: val
      })
    }
  },
  computed: {
    ...mapState({
      navArr: state => state.nav_menu
    })
  }
}

</script>
<style>
.no-margin {
  margin: 0 !important;
}

</style>
